<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="ol.css" type="text/css">
<link rel="stylesheet" href="bootstrap-responsive.min.css"
	type="text/css">
<link rel="stylesheet" href="layout.css" type="text/css">
<link rel="stylesheet"
	href="../resources/bootstrap/css/bootstrap-responsive.min.css"
	type="text/css">

<style>
.example {
	height: 140px;
	padding: 3px;
	background-color: #eee;
	border-radius: 3px;
	margin-bottom: 10px;
	overflow: auto;
}

.example:hover {
	background-color: #ddd;
}

.navbar-search.pull-left {
	padding: 5px;
}

::-webkit-scrollbar {
	width: 8px;
}

::-webkit-scrollbar-button {
	width: 0;
	height: 0;
	display: none;
}

::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.10), inset 0 -1px 0
		rgba(0, 0, 0, 0.07);
}

::-webkit-scrollbar-thumb:hover {
	background-color: rgba(0, 0, 0, 0.4);
}

::-webkit-scrollbar-corner {
	background-color: transparent;
}
</style>
<title>Accessibility example</title>

<script type="text/javascript">
//inja code bezanid
</script>

</head>

<body>
	<div class="navbar navbar-inverse navbar-fixed-top">
		<div class="navbar-inner">
			<div class="container">
				<a class="brand" href="./"><img src="logo.png"
					alt=""> OpenLayers 3 Examples</a>
			</div>
		</div>
	</div>

	<div class="container-fluid">

		<div class="row-fluid">
			<div class="span12">
				<a class="skiplink" href="#map">Go to map</a>
				<div id="map" class="map" tabindex="0"></div>
			</div>
		</div>

		<div class="row-fluid">

			<div class="span12">
				<h4 id="title">Accessibility example</h4>
				<p id="shortdesc">Example of an accessible map.</p>
				<div id="docs">
					<p>
						This page's
						<code>map</code>
						element has its
						<code>tabindex</code>
						attribute set to
						<code>"0"</code>
						, that makes it focusable. To focus the map element you can either
						navigate to it using the "tab" key or use the skip link. When the
						<code>map</code>
						element is focused the + and - keys can be used to zoom in and out
						and the arrow keys can be used to pan.
					</p>
					<p>When clicked the "Zoom in" and "Zoom out" buttons below the
						map zoom the map in and out, respectively. You can navigate to the
						buttons using the "tab" key, and press the "enter" key to trigger
						the zooming action.</p>
					<p>
						See the <a href="accessible.js" target="_blank">accessible.js
							source</a> to see how this is done.
					</p>
				</div>
				<div id="tags">accessibility, tabindex</div>
			</div>

		</div>

	</div>

	<script src="jquery.min.js" type="text/javascript"></script>
	<script src="../resources/example-behaviour.js" type="text/javascript"></script>
	<script src="loader.js?id=accessible" type="text/javascript">
    var template, target;

    function listExamples(examples) {
      target.innerHTML = "";
      var node = template.process({
        context: {examples: examples},
        clone: true,
        parent: target
      });
      document.getElementById("count").innerHTML = "(" + examples.length + ")";
    }

    var timerId;
    function inputChange() {
      if (timerId) {
        window.clearTimeout(timerId);
      }
      var text = this.value;
      timerId = window.setTimeout(function() {
        filterList(text);
      }, 500);
    }

    function filterList(text) {
      var examples;
      if (text.length < 2) {
        examples = info.examples;
      } else {
        var words = text.split(/\W+/);
        var scores = {};
        for(var i=0; i<words.length; ++i) {
          var word = words[i].toLowerCase();
          var dict = info.index[word];
          var updateScores = function() {
            for(exIndex in dict) {
              var count = dict[exIndex];
              if(scores[exIndex]) {
                if(scores[exIndex][word]) {
                  scores[exIndex][word] += count;
                } else {
                  scores[exIndex][word] = count;
                }
              } else {
                scores[exIndex] = {};
                scores[exIndex][word] = count;
              }
            }
          };
          if (dict) {
            updateScores();
          } else {
            var r;
            for (idx in info.index) {
              r = new RegExp(word);
              if (r.test(idx)) {
                dict = info.index[idx];
                updateScores();
              }
            }
          }
        }
        examples = [];
        for (var j in scores) {
          var ex = info.examples[j];
          ex.score = scores[j];
          examples.push(ex);
        }
        // sort examples by first by number of words matched, then
        // by word frequency
        examples.sort(function(a, b) {
          var cmp;
          var aWords = 0, bWords = 0;
          var aScore = 0, bScore = 0;
          for (var i in a.score) {
            aScore += a.score[i];
            aWords += 1;
          }
          for (var j in b.score) {
            bScore += b.score[j];
            bWords += 1;
          }
          if (aWords == bWords) {
            cmp = bScore - aScore;
          } else {
            cmp = bWords - aWords;
          }
          return cmp;
        });
      }
      listExamples(examples);
    }

    function parseQuery() {
      var params = {};
      var list = window.location.search.substring(1).split("&");
      for (var i = 0; i < list.length; ++i) {
        var pair = list[i].split("=");
        if (pair.length == 2) {
          params[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
        }
      }
      if (params["q"]) {
        var input = document.getElementById("keywords");
        input.value = params["q"];
        inputChange.call(input);
      }
    }

    window.onload = function() {
      for (var i = 0; i < info.examples.length; ++i) {
        info.examples[i].link += window.location.search;
      }
      // document.getElementById('keywords').focus();
      template = new jugl.Template("template");
      target = document.getElementById("examples");
      listExamples(info.examples);
      document.getElementById("keywords").onkeyup = inputChange;
      parseQuery();
    };
  </script>

</body>

</html>